<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <h:form id="playlistForm" rendered="#{userSession.connected}">
                <p:contextMenu for="playlists" style="width: 200px;">
                    <p:menuitem icon="ui-icon-search" value="Titres" update=":detailForm:playlistDetail" oncomplete="playlistDetailDialog.show()"/>
                </p:contextMenu>
                <h1><h:outputText value="Playlists partagés avec moi"/></h1>
                <p:dataTable id="playlists" value="#{userSession.user.sharedPlaylists}" var="playlist" paginator="true" rows="50" widgetVar="playlistTable"
                             emptyMessage="Aucune playlist partagée."  styleClass="playlistTable"
                             paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} Aller à la page {JumpToPageDropdown}" 
                             rowsPerPageTemplate="25, 50"
                             rowKey="#{playlist.id}" selection="#{myPlaylist.selectedPlaylist}" selectionMode="single">
                    <f:facet name="header">  
                        <p:outputPanel>  
                            <h:outputText value="Recherche sur toutes les colonnes : " />  
                            <p:inputText id="globalFilter" onkeyup="playlistTable.filter()" style="width:150px" />  
                        </p:outputPanel>  
                    </f:facet>
                    <p:column style="width: 5%;">
                        <p:commandButton rendered="#{playlist.nbMusics != 0}" icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playPlayList(#{playlist.id}, '#{songList.addSlashes(playlist.JSon)}');"/>
                    </p:column>
                    <p:column sortBy="#{playlist.title}" filterBy="#{playlist.title}" style="width: 30%;">
                        <f:facet name="header">
                            <h:outputText value="Playlist"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.title}"/>
                    </p:column>
                    <p:column sortBy="#{playlist.creationDate}" filterBy="#{playlist.creationDate}" style="width: 10%;">
                        <f:facet name="header">
                            <h:outputText value="Date de création"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.creationDate}">
                            <f:convertDateTime pattern="dd/MM/yyyy à HH:mm" />
                        </h:outputText>
                    </p:column>
                    <p:column sortBy="#{playlist.owner.firstname} #{playlist.owner.lastname}" filterBy="#{playlist.owner.firstname} #{playlist.owner.lastname}" style="width: 15%;">
                        <f:facet name="header">
                            <h:outputText value="Propriétaire"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.owner.firstname} #{playlist.owner.lastname}"/>
                    </p:column>
                    <p:column sortBy="#{playlist.description}" filterBy="#{playlist.description}" style="width: 40%;">
                        <f:facet name="header">
                            <h:outputText value="Description"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.description}"/>
                    </p:column>
                    <p:column style="width: 10%;">
                        <f:facet name="header">
                            <h:outputText value="Durée"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.totalTimeStr} (#{playlist.nbMusics} titres)"/>
                    </p:column>
                    <f:facet name="footer">  
                        Total : #{fn:length(userSession.user.playlists)} playlists créés.
                    </f:facet> 
                </p:dataTable>
            </h:form>
            <h:form id="detailForm">
                <p:dialog header="#{myPlaylist.selectedPlaylist.title}" widgetVar="playlistDetailDialog" resizable="false"  
                          width="900" height="400" showEffect="clip" hideEffect="fold" id="playlistDetail">  

                    <p:commandButton rendered="#{myPlaylist.selectedPlaylist.nbMusics != 0}" icon="ui-icon-play" value="Lire la playlist" ajax="true" oncomplete="playPlayList(#{myPlaylist.selectedPlaylist.id}, '#{songList.addSlashes(myPlaylist.selectedPlaylist.JSon)}');"/>
                    <br/><br/>
                    <table id="playlistDescTable" style="width:90%;">
                        <thead>
                            <th>Date de création</th>
                            <th>Par</th>
                            <th>Description</th>
                            <th>Public</th>
                            <th>Nombre de titres</th>
                            <th>Durée totale</th>
                            <th>Joué</th>
                        </thead>
                        <tr>
                            <td>
                                <h:outputText value="#{myPlaylist.selectedPlaylist.creationDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy à HH:mm" />
                                </h:outputText>
                            </td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.owner.firstname} #{myPlaylist.selectedPlaylist.owner.lastname}"/></td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.description}" /></td>
                            <td>
                                <h:outputText value="Oui" rendered="#{!myPlaylist.selectedPlaylist.privatePlaylist}"/>  
                                <h:outputText value="Non" rendered="#{myPlaylist.selectedPlaylist.privatePlaylist}"/>  
                            </td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.nbMusics}" /></td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.totalTimeStr}" /></td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.nbTimesPlayed} fois" /></td>
                        </tr>
                    </table>
                    <br/>
                    <ui:fragment rendered="#{myPlaylist.selectedPlaylist.nbMusics != 0}">
                        <h:outputText value="Genres : "/>
                        <ui:repeat value="#{myPlaylist.selectedPlaylist.genres}" var="genre" varStatus="loopGenres">
                            <h:outputText value="#{genre.label}"/>
                            <h:outputText rendered="#{loopGenres.index ge 0 and loopGenres.index lt myPlaylist.selectedPlaylist.genres.size() - 1}" value=", "/>
                        </ui:repeat>
                        <table id="playlistSongTable">
                            <thead>
                                <th></th>
                                <th></th>
                                <th>Titre</th>
                                <th>Artiste</th>
                                <th>Album</th>
                                <th>Durée</th>
                            </thead>
                            <ui:repeat value="#{myPlaylist.selectedPlaylist.musics}" var="song" varStatus="loop">
                                <tr>
                                    <td><h:graphicImage width="50" library="images" value="#{song.coverImage}" /></td>
                                    <td><p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playSongFromPlayList(#{song.id}, #{loop.index}, '#{songList.addSlashes(myPlaylist.selectedPlaylist.JSon)}');"/></td>
                                    <td><h:outputText value="#{song.title}"/></td>
                                    <td><h:outputText value="#{song.artist.artistName}"/></td>
                                    <td><h:outputText value="#{song.album.title}"/></td>
                                    <td><h:outputText value="#{song.totalTimeStr}"/></td>
                                </tr>
                            </ui:repeat>
                        </table>
                    </ui:fragment>
                </p:dialog>
            </h:form>

        </f:view>
    </ui:define>
</ui:composition>
